<template>
	<div style="background: #fff;padding: 10px 0;margin-bottom: 10px;">
		<el-tooltip class="item" effect="dark" content="保存PNG (Cmd + S)" placement="bottom">
			<el-button name="savePNG" @click="handleClick" class="item-space" size="small">
				保存PNG
			</el-button>
		</el-tooltip>

		<el-tooltip class="item" effect="dark" content="打印 (Cmd + P)" placement="bottom">
			<el-button name="print" @click="handleClick" class="item-space" size="small">
				打印
			</el-button>
		</el-tooltip>

		<el-tooltip class="item" effect="dark" content="导出 (Cmd + P)" placement="bottom">
			<el-button name="toJSON" @click="handleClick" class="item-space" size="small">
				导出
			</el-button>
		</el-tooltip>

	</div>
</template>
<script>
	import {
		DataUri
	} from '@antv/x6'
	let that
	export default {
		props: ['graph'],
		data() {
			return {
				canUndo: null,
				canRedo: null
			}
		},
		mounted() {
			that = this
			this.myInit()
		},
		methods: {
			myInit() {
				let graph = that.graph
				console.log(graph)
				const {
					history
				} = graph
				// this.canUndo = history.canUndo()
				// this.canRedo = history.canRedo()
				// history.on('change', () => {
				// this.canUndo = history.canUndo()
				// this.canRedo = history.canRedo()
				//})

			},
			copy() {
				const {
					graph
				} = FlowGraph
				const cells = graph.getSelectedCells()
				if (cells.length) {
					graph.copy(cells)
				}
				return false
			},

			cut() {
				const {
					graph
				} = FlowGraph
				const cells = graph.getSelectedCells()
				if (cells.length) {
					graph.cut(cells)
				}
				return false
			},

			paste() {
				const {
					graph
				} = FlowGraph
				if (!graph.isClipboardEmpty()) {
					const cells = graph.paste({
						offset: 32
					})
					graph.cleanSelection()
					graph.select(cells)
				}
				return false
			},

			handleClick(event) {
				let graph = that.graph
				const name = (event.currentTarget).name
				switch (name) {
					case 'undo':
						graph.history.undo()
						break
					case 'redo':
						graph.history.redo()
						break
					case 'delete':
						graph.clearCells()
						break
					case 'savePNG':
						graph.toPNG((dataUri) => {
							// 下载
							DataUri.downloadDataUri(dataUri, 'chartx.png')
						}, {
							backgroundColor: 'white',
							padding: {
								top: 20,
								right: 30,
								bottom: 40,
								left: 50,
							},
							quality: 1
						})
						break
					case 'saveSVG':
						graph.toSVG((dataUri) => {
							// 下载
							DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg')
						})
						break
					case 'print':
						graph.printPreview()
						break
					case 'copy':
						this.copy()
						break
					case 'cut':
						this.cut()
						break
					case 'paste':
						this.paste()
						break
					case 'toJSON':
						console.log(graph.toJSON())
						window.localStorage.setItem('graphJson', JSON.stringify(graph.toJSON()))
						// graph.fromJSON({cells:[graph.toJSON().cells[0],graph.toJSON().cells[1]]})
						break
					default:
						break
				}
			}
		}
	}
</script>
<style scoped>
	.bar {
		width: 100%;
		z-index: 99999;
		margin-right: 16px;
	}

	.item-space {
		margin-left: 16px;
	}
</style>